<template>
  <view class="root">
    <acme-app-bar title="FloatingBubble"></acme-app-bar>
    
    <text class="tips">尝试拖拽和点击一下气泡吧</text>
    
    <movable-area class="move-area">
      <movable-view :y="500" direction="all">
        <image src="/static/product/product_10.jpg" @click="clickButton"></image>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    },
    methods: {
      clickButton() {
        uni.showToast({
          title: '你点击了气泡',
          icon: 'none'
        })
      }
    },
  };
</script>


<style lang="scss" scoped>
  .root {
    text-align: center;
    
    .tips {
      color: rgba(69, 90, 100, 0.6);
      font-size: 28upx;
      display: block;
      margin-top: 37vh;
    }
    
    .move-area {
      width: 90upx;
      height: calc(100vh - 350upx);
      position: fixed;
      right: 20upx;
      bottom: 150upx;
      margin: auto;
      pointer-events: none;
      
      movable-view {
        width: 90upx;
        height: 90upx;
        background: green;
        border-radius: 50%;
        pointer-events: auto;
        
        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
  }
</style>